<template>
  <div class="firstperson">
    <div class="c_top">
      <div class="left-nav">
        <div class="optionShow">
          <el-button
            id="optionShow"
            type="text"
            icon="el-icon-guide"
            @click="centerDialogVisible = true"
          >操作说明</el-button>
        </div>
        <el-dialog title="步骤介绍" :visible.sync="centerDialogVisible" width="30%">
          <p>1、此时的拔高系数为3米；</p>
          <p>2、点击选取颜色，点击提交按钮，实现岩性着色；</p>
          <p>3、通过快捷键，以第一人称视角浏览整个地层模型。</p>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
        <div class="optionShow">
          <el-button id="optionShow" type="text" icon="el-icon-setting">主要功能</el-button>
        </div>
        <div class="optionShow">
          <el-button id="optionShow" class="color" type="text" style=" padding-left: 15px;">
            <strong>1、</strong>岩性着色
          </el-button>
        </div>
        <div class="lithology">
          <label for="color-1">
            填土, 素填土:
            <input id="color-1" type="color" value="#FF7F00" ref="color-1" />
          </label>
          <label for="color-2">
            黄土：
            <input id="color-2" type="color" value="#FFEC8B" />
          </label>
          <label for="color-3">
            古土壤:
            <input id="color-3" type="color" value="#8B7355" />
          </label>
          <label for="color-4">
            粉质粘土, 粉细砂：
            <input id="color-4" type="color" value="#EEDC82" />
          </label>
          <label for="color-5">
            卵石:
            <input id="color-5" type="color" value="#96CDCD" />
          </label>
          <label for="color-6">
            圆砾, 砾砂：
            <input id="color-6" type="color" value="#4682B4" />
          </label>
          <label for="color-7">
            中粗砂:
            <input id="color-7" type="color" value="#00CD00" />
          </label>
          <button id="color-change" @click="changeColor">提交</button>
        </div>

        <div class="optionShow">
          <el-button id="optionShow" class="color" type="text" style=" padding-left: 15px;">
            <strong>2、</strong>第一人称视角
          </el-button>
        </div>
        <div class="option">
          <p>模型向上： R 键</p>
          <p>模型向下： F 键</p>
          <p>模型左： A 键</p>
          <p>模型右： D 键</p>
          <p>模型前进：W 键</p>
          <p>模型后退：S 键</p>
        </div>
      </div>
      <div
        id="WebGL-output"
        class="webgl"
        v-loading="loading"
        element-loading-text="模型加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      ></div>
    </div>
    <div class="guid">
      <div class="guidBar">
        <el-button icon="el-icon-arrow-left" plain @click="previous">上一页</el-button>
        <el-button plain @click="nextStep">
          下一页
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
import * as THREE from "three/build/three.js";
import FirstPersonControls from "first-person-controls";
import { Notification } from "element-ui";
export default {
  name: "firstperson",
  data() {
    return {
      centerDialogVisible: true,
      gtpoints: [],
      scene: null,
      controls: null,
      webGLRenderer: null,
      camera: null,
      h: 3.0,
      width: "",
      height: "",
      GTPGeometry: "",
      clock: null,
      delta: "",
      color1: "#ff7f00", //16744192
      color2: "#ffec8b",
      color3: "#8b7355",
      color4: "#eedc82",
      color5: "#96cdcd",
      color6: "#4682b4",
      color7: "#00cd00",
      loading: false
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    changeColor() {
      this.color1 = this.convertcolor(document.getElementById("color-1").value);
      this.color2 = this.convertcolor(document.getElementById("color-2").value);
      this.color3 = this.convertcolor(document.getElementById("color-3").value);
      this.color4 = this.convertcolor(document.getElementById("color-4").value);
      this.color5 = this.convertcolor(document.getElementById("color-5").value);
      this.color6 = this.convertcolor(document.getElementById("color-6").value);
      this.color7 = this.convertcolor(document.getElementById("color-7").value);
      document.getElementById("WebGL-output").innerHTML = "";
      this.init();
      var score = Math.round(Math.random() * 10) + 10;
      this.$store.dispatch("addoneScoreByAction", score);
    },
    convertcolor(color) {
      color = color.replace("#", "0x");
      return parseInt(color);
    },
    render() {
      this.delta = this.clock.getDelta();
      this.controls.update(this.delta);
      requestAnimationFrame(this.render);
      this.webGLRenderer.render(this.scene, this.camera);
    },
    onWindowResize() {
      this.camera.aspect = this.width / this.height;
      this.camera.updateProjectionMatrix();
      this.webGLRenderer.setSize(this.width, this.height);
      this.controls.handleResize();
      this.render();
    },
    init() {
      this.loading = true;
      let container = document.getElementById("WebGL-output");
      this.width = container.clientWidth;
      this.height = container.clientHeight;
      this.camera = new THREE.PerspectiveCamera(
        45,
        this.width / this.height,
        0.1,
        10000
      );
      this.camera.position.x = 2750;
      this.camera.position.y = 200;
      this.camera.position.z = 2450;
      this.camera.lookAt(new THREE.Vector3(0, 0, 0));
      this.camera.up.x = 0;
      this.camera.up.y = 1;
      this.camera.up.z = 0;
      this.clock = new THREE.Clock();
      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color(0xebebeb);
      this.webGLRenderer = new THREE.WebGLRenderer({
        antialias: true
      });

      this.webGLRenderer.setSize(this.width, this.height);

      this.controls = new FirstPersonControls(this.camera, container);
      this.controls.enabled = true;
      this.controls.lookSpeed = 0.02; //鼠标移动查看的速度
      this.controls.movementSpeed = 300; //相机移动速度
      this.controls.lookVertical = false;
      this.controls.noFly = false;
      this.controls.constrainVertical = true; //约束垂直
      this.controls.verticalMin = 1.0;
      this.controls.verticalMax = 2.0;
      this.controls.lon = 225; //进入初始视角x轴的角度
      this.controls.lat = 0; //初始视角进入后y轴的角度

      container.appendChild(this.webGLRenderer.domElement);

      //开始
      this.$axios
        .post("http://192.168.3.165:3102/dcvir/getData")
        .then(res => {
          this.loading = false;
          Notification.success({
            message: "模型加载完成!",
            duration: 2000,
            position: "bottom-right"
          });
          this.gtpoints = res.data;
          for (let i in this.gtpoints) {
            var gtpoint = this.gtpoints[i];
            var vertices = new Float32Array([
              gtpoint.x1 - 2245,
              (gtpoint.z1 - 382) * this.h,
              gtpoint.y1 - 1845,
              gtpoint.x2 - 2245,
              (gtpoint.z2 - 382) * this.h,
              gtpoint.y2 - 1845,
              gtpoint.x3 - 2245,
              (gtpoint.z3 - 382) * this.h,
              gtpoint.y3 - 1845,
              gtpoint.x4 - 2245,
              (gtpoint.z4 - 382) * this.h,
              gtpoint.y4 - 1845,
              gtpoint.x5 - 2245,
              (gtpoint.z5 - 382) * this.h,
              gtpoint.y5 - 1845,
              gtpoint.x6 - 2245,
              (gtpoint.z6 - 382) * this.h,
              gtpoint.y6 - 1845
            ]);
            var indexes = new Uint16Array([
              0,
              1,
              2,
              3,
              4,
              5,
              0,
              1,
              3,
              1,
              3,
              4,
              1,
              2,
              4,
              2,
              4,
              5,
              0,
              2,
              3,
              2,
              3,
              5
            ]);
            this.GTPGeometry = new THREE.BufferGeometry();
            this.GTPGeometry.addAttribute(
              "position",
              new THREE.BufferAttribute(vertices, 3)
            );
            this.GTPGeometry.addAttribute(
              "soil",
              new THREE.BufferAttribute(gtpoint.sid, 1)
            );
            this.GTPGeometry.index = new THREE.BufferAttribute(indexes, 1);
            if (gtpoint.sid == 1) {
              var material = new THREE.MeshBasicMaterial({
                color: this.color1,
                side: THREE.DoubleSide
              });
            }
            if (gtpoint.sid == 2) {
              var material = new THREE.MeshBasicMaterial({
                color: this.color2,
                side: THREE.DoubleSide
              });
            }
            if (gtpoint.sid == 3) {
              var material = new THREE.MeshBasicMaterial({
                color: this.color3,
                side: THREE.DoubleSide
              });
            }
            if (gtpoint.sid == 4) {
              var material = new THREE.MeshBasicMaterial({
                color: this.color4,
                side: THREE.DoubleSide
              });
            }
            if (gtpoint.sid == 5) {
              var material = new THREE.MeshBasicMaterial({
                color: this.color5,
                side: THREE.DoubleSide
              });
            }
            if (gtpoint.sid == 6) {
              var material = new THREE.MeshBasicMaterial({
                color: this.color6,
                side: THREE.DoubleSide
              });
            }
            if (gtpoint.sid == 7) {
              var material = new THREE.MeshBasicMaterial({
                color: this.color7,
                side: THREE.DoubleSide
              });
            }

            var GTPMesh = new THREE.Mesh(this.GTPGeometry, material); //var GTPMesh = new THREE.Mesh(GTPGeometry, material);
            GTPMesh.name = "gtp";
            this.scene.add(GTPMesh);

            var wirematerial = new THREE.MeshBasicMaterial({ wireframe: true });
            var GTPWire = new THREE.Mesh(this.GTPGeometry, wirematerial);
            GTPWire.name = "gtp";
            this.scene.add(GTPWire);
          }
        })
        .catch(console.log);
      this.render();
      //添加window窗口调整监听事件
      window.addEventListener("resize", this.onWindowResize, false);
    },
    previous(){
      this.$router.go(-1);
    },
    nextStep(){
      this.$router.push({ name:'gtp'});
    }
  }
};
</script>
<style lang="less" scoped>
.firstperson {
  margin: 30px 0 15px 0;
  .c_top {
    padding: 0 0 0 20px;
    display: flex;
    justify-content: space-between;
    .left-nav {
      height: 100%;
      width: 205px;
      padding: 10px 10px;
      background-color: #fff;
      border: 1px solid #eaeaea;
      .optionShow {
        width: 100%;
        height: 35px;
        border-bottom: 1px dashed #eaeaea;
        .color {
          color: #333;
        }
        #optionShow {
          width: 100%;
          text-align: left;
          padding: 0;
          padding-left: 5px;
          line-height: 35px;
        }
      }
      .lithology {
        margin-top: 15px;
        label {
          font-size: 14px;
          display: flex;
          justify-content: space-between;
          height: 35px;
          margin-bottom: 15px;
          line-height: 35px;
          input {
            line-height: 21px;
            width: 32%;
            height: 35px;
            padding: 5px;
            -webkit-user-select: text;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 3px;
            outline: 0;
            background-color: #fff;
            -webkit-appearance: none;
          }
        }
        #color-change {
          width: 100%;
          border: 1px solid #409eff;
          color: #409eff;
        }
      }
      .option {
        margin-top: 10px;
        p {
          color: #333;
          text-indent: 2em;
        }
      }
    }
    .webgl {
      height: 755px;
      width: 85%;
    }
  }
  .guid {
    width: 100%;
    .guidBar {
      display: flex;
      justify-content: space-between;
      width: 250px;
      height: 40px;
      margin: 15px auto 0;
    }
  }
}
</style>


